真的好想離開 Vue 3 新手村 - Day 4: 從 npm run build (vite build) 簡單認識打包 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 4

Modern Web

真的好想離開 Vue 3 新手村 feat. CompositionAPI系列第 4 篇

真的好想離開 Vue 3 新手村 - Day 4: 從 npm run build (vite build) 簡單認識打包

14th鐵人賽 vue.js vue3 vite npm

安揪拉

2022-09-19 15:37:19

31765 瀏覽

分享至

誰適合看這篇

不知道 npm run dev、npm run build、npm run preview 的用處
不知道「打包」做了哪些事？為什麼前端需要打包？

上集回顧

murmur: 臨時發現 Day3 字數大爆炸(๑´ㅂ`๑)，所以決定把認識 vite 指令和打包獨立成一篇

使用 npm init vue@latest ｜ npm init vue@3 指令建立 Vue 專案資料夾後，會自動生成一份 package.json 檔，裡面已經寫好 3 個可以運行 Vite 指令的 script，今天就要來認識這三個 script。

Outline

運行 Vite 的三個 script
- npm run dev ｜ npx vite
- npm run build ｜ npx vite build
- npm run preview ｜ npx vite preview --port 4173
從 npm run build ＆打包後的專案簡單認識「打包」

運行 Vite 的三個腳本

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173"
},

npm run dev
- 等同於 npx vite
- 開啟本地伺服器，並提供 Hot Module Replacement (HMR)，可以在更動程式碼後即時更新
npm run build
- 等同於 npx vite build
- 執行後會將專案打包到 📂 dist
- 所以這個資料夾通常不會出現在專案開發的 git 版控裡，在最初專案建立時，create-vue 已經很貼心的把 📂 dist 放到 .gitignore 裡面了
npm run preview
- 等同於 npx vite preview --port 4173
- 開啟本地伺服器，預覽打包後的 📂 dist 專案內容
- 在正式佈署前檢查打包後的內容是否有問題

從打包後的專案簡單認識「打包」

來打包一次觀察看看

透過寫好的腳本執行 Vite 打包的指令

npm run build

完成後會產生一個 📂 dist 資料夾，原始專案中的程式碼，（包含你自己寫的程式碼，和 import 使用的套件程式碼），經過編譯、壓縮或優化後，都被打包進下面的檔案中。

├── assets
│   ├── AboutView.4d995ba2.css
│   ├── AboutView.d4a42a23.js
│   ├── index.4dd4af7a.css
│   ├── index.6ecebeb9.js
│   └── logo.da9b9095.svg
├── favicon.ico
└── index.html

打包過後的檔案後面會跟著一個 hash 碼
- 昨天提到 📂 public 內的資料不會經過編譯和打包，會直接複製一份到根目錄
- 可以觀察到原本 📂 public 中的資源 -- favicon.ico，名稱後面沒有加上 hash 值，因為沒有經過打包
專案程式碼整合成主要的 .js 和 .css 檔案，並透過 <script> 和 <link> 掛到 index.html 上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script type="module" crossorigin src="/assets/index.6ecebeb9.js"></script>
    <link rel="stylesheet" href="/assets/index.4dd4af7a.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

檢查打包後的內容

透過寫好的腳本執行 Vite 指令，開啟本地伺服器，運行打包後的 📂 dist 專案內容，可以在正式佈署前檢查專案打包是否有問題。

npm run preview

這個腳本背後執行的指令是 vite preview --port 4173，所以會產生 port 號為 4173 的網址：http://localhost:4173/。

為什麼要打包？

與其說「為什麼要打包？」，應該說在執行打包指令 npm run build 後，打包工具幫開發者做了什麼？對我們有什麼好處？

必要的編譯語法
- 瀏覽器不認識 .vue 檔，需要編譯成瀏覽器能讀懂的 .js 檔和 .css 檔
- 瀏覽器不認識的新語法，需要 polyfill。
壓縮成一個或較少份檔案，可以減少 HTTP Requests 的次數
「將程式碼變短」(Minify)，節省瀏覽器解析的時間
- 在不影響程式運作的前提下，去除不必要的空白字元、註解，將變數名稱、函數名稱、參數名稱縮短等等
- 打開 index.4dd4af7a.css 或 index.6ecebeb9.js 就可以發現被 minified 過的程式碼：
「將程式碼變醜」(Uglify)，讓赤裸的前端不要那麼赤裸，比較不方便被外人研究
處理第三方套件模組的引入跟編譯
開發團隊會透過 npm 或 yarn 安裝專案所需的第三方套件。
套件模組都放在 node_modules 內，卻可以透過 import from "xxx" 直接使用，不需要寫出該模組的完整路徑，這是打包工具的功勞。
```
import axios from "axios";
import router from "@/router/router";
```
而且部份模組需要經過編譯，有的套件支援原生 ESM 模組，可以直接 import 使用，有的套件只支援 cjs，需要經過必要的編譯，瀏覽器才可以讀取。

＊2022/10/17 補充：新增第五點（沒想到竟然漏掉最重要的部份><）

除此之外，能在 javascript 程式碼內 import 圖片或 CSS，其實也是打包工具幫忙處理的，在原生 javascript 內是無法直接引入其他檔案的。

以上內容不僅限於 Vite，不同的打包工具會有不同的預設打包規則，開發者可以透過 config 去調整。

像 Vite 在預設情況下只處理語法編譯，不包含 polyfill，可以透過 config 調整，最低支持到 es2015，(兼容性範圍為能夠支援原生 ESModule 的瀏覽器)，要支援更舊的瀏覽器，需要自己再設定，但這會是學習路徑比較後面的事情了。

最後，建議看看下面的參考資料：
前端也需要編譯？Transpile、Compile、Minify、Uglify 基本介紹

總結

專案 package.json 內的 script
- npm run dev：開啟本地伺服器，並提供 HMR，可以在更動程式碼後即時更新
- npm run build：將專案打包到 📂 dist
- npm run preview：開啟本地伺服器，預覽打包後的 📂 dist 專案內容，可以在正式佈署前檢查專案打包是否有問題。
為什麼要「打包」
- 必要的語法編譯：例如將 .vue 編譯成瀏覽器能讀懂的語言
- 效能優化：透過 Minify 降低瀏覽器解析時間，壓縮成較少檔案，降低 HTTP request 次數
- 其他需求：例如 Uglify 醜化程式碼，或專案想相容舊瀏覽器